<template>
  <div class="box_inventory">
    <!-- 面包屑盒子 -->
    <div class="bread">
      <span>统计分析</span> >
      <span>库存</span>
    </div>
    <div class="box_invent">
      <h3>库存记录</h3>
      <!-- 选项卡 -->
      <div>
        <el-tabs v-model="invent" @tab-click="handleClick">
          <!-- 搜索框 -->

          <el-tab-pane label="教学设备库存" name="first" strip>
            <!-- 教学设备库存数据表 -->
            <div class="search_teach">
              <p>教学设备目录：</p>
              <div class="search_father">
                <el-input
                  v-model="invent_jx_input"
                  placeholder="请输入设备名称"
                  class="search"
                ></el-input>
                <el-button type="primary" @click="invent_jx_search"
                  >查询</el-button
                >
                <el-button  plain @click="invent_jx_toExcel"
                  >导出Exel</el-button
                >
              </div>
            </div>
            <div id="inventData_jx_id" style="margin-top: 15px;">
              <el-table :data="inventData_jx" border style="width: 100%" id="inventData_jx_id_B" >
                <el-table-column
                  prop="facilityEncoding"
                  label="编码"
                  width="180"
                >
                </el-table-column>
                <el-table-column prop="className" label="一级目录" width="180">
                </el-table-column>
                <el-table-column
                  prop="facilityAmount"
                  label="库存数量"
                ></el-table-column>
                <el-table-column
                  prop="leaseNum"
                  label="借出数量"
                ></el-table-column>
                <el-table-column prop="num" label="挂失数量">
                  <!-- <template slot-scope="scope">
                    <span>0</span>
                  </template> -->
                </el-table-column>
                <el-table-column
                  prop="scrapNum"
                  label="报废数量"
                ></el-table-column>
                <el-table-column
                  prop="scrapNum,leaseNum,facilityAmount"
                  label="累计数量"
                >
                  <template slot-scope="scope">
                    {{
                      scope.row.scrapNum +
                      scope.row.leaseNum +
                      scope.row.facilityAmount
                    }}
                  </template>
                </el-table-column>
                <el-table-column prop="" label="操作">
                  <template slot-scope="scope">
                    <span @click="check_two(scope.$index, scope.row)"
                      >查看下级目录</span
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
          <el-tab-pane label="易耗品库存" name="second">
            <div class="search_teach">
              <p>易耗品目录：</p>
              <div class="search_father">
                <el-input
                  v-model="invent_yhp_input"
                  placeholder="请输入易耗品名称"
                  class="search"
                ></el-input>
                <el-button type="primary" @click="invent_yhp_search"
                  >查询</el-button
                >
                <el-button  plain @click="invent_yhp_toExcel"
                  >导出Excel</el-button
                >
              </div>
            </div>
            <div style="margin-top: 15px;">
              <el-table border :data="inventData_yhp" style="width: 100%" id="inventData_yhp_id_B">
                <el-table-column prop="cnumber" label="编码" width="180">
                </el-table-column>
                <el-table-column prop="cname" label="一级目录" width="180">
                </el-table-column>
                <el-table-column prop="cnum" label="库存数量"></el-table-column>
                <el-table-column
                  prop="cdistributeNum"
                  label="分发数量"
                ></el-table-column>
                <el-table-column
                  prop="creceiveNum"
                  label="领取数量"
                ></el-table-column>
                <el-table-column
                  prop="cwriteNum"
                  label="核销数量"
                ></el-table-column>
                <el-table-column
                  prop="cnum,cdistributeNum,creceiveNum,cwriteNum"
                  label="累计数量"
                >
                  <template slot-scope="scope">
                    {{
                      scope.row.cnum +
                      scope.row.cdistributeNum +
                      scope.row.creceiveNum +
                      scope.row.cwriteNum
                    }}
                  </template>
                </el-table-column>
                <el-table-column prop="" label="操作">
                  <template slot-scope="scope">
                    <span @click="check_two(scope.$index, scope.row)"
                      >查看下级目录</span
                    >
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- 统计表 -->
      <div>
        <div class="e_invent_num"></div>
        <div></div>
      </div>
    </div>
    <!-- echarts表 -->
    <div>
      <!-- 柱状表 -->
      <div id="columnar_invent"></div>
      <!-- 圆形表 -->
      <div id="columnar_circle"></div>
    </div>
  </div>
</template>
<script>
import FileSaver from 'file-saver'
import statistics_serive from "../../serive/statistics";
import XLSX from 'xlsx' 
import myExcel from '../../utils/toExcel'
import * as echarts from 'echarts';
export default {
  name: "inventory",
  data() {
    return {
      muLu: ["一级目录", "二级目录"],
      input: "",
      invent: "first",
      // 存放原数据
      inventData_jx: [],
      // 副本数据
      inventData_jx_B: [],

      inventData_yhp: [],
      inventData_yhp_B: [],
      // 教学设备库存搜索
      invent_jx_input: "",
      // 易耗品库存搜索
      invent_yhp_input: "",
    };
  },
  mounted() {
    // 获取教学设备库存数据
    statistics_serive.select_invent_jx("", "", "", "", "", 50, 1).then((res) => {
      console.log(res.data.data.length);
      this.inventData_jx = res.data.data;
      this.inventData_jx_B = res.data.data;
    });
    // 获取易耗品库存数据
    statistics_serive
      .select_invent_yhp("", "", "", "", "", 50, 1)
      .then((res) => {
        this.inventData_yhp = res.data.data;
        this.inventData_yhp_B = res.data.data;
        console.log(res.data.data);
      });

    this.columnar_invent();
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    // 查看下级目录
    check_two(index, row) {
      // console.log(index, row);
    },
    // 搜索教学设备
    invent_jx_search() {
      let arr = [];
      for (let i = 0; i < this.inventData_jx_B.length; i++) {
        if (this.inventData_jx_B[i].className.includes(this.invent_jx_input.trim())) {
          arr.push(this.inventData_jx_B[i]);
        }
      }
      this.inventData_jx = arr;
      arr = [];
    },
    // 搜索易耗品
    invent_yhp_search() {
      let arr = [];
      for (let i = 0; i < this.inventData_yhp_B.length; i++) {
        if (this.inventData_yhp_B[i].cname.includes(this.invent_yhp_input.trim())) {
          arr.push(this.inventData_yhp_B[i]);
        }
      }
      this.inventData_yhp = arr;
      arr = [];
    },
    //导出表
    invent_jx_toExcel(){
      // this.$confirm("是否确认导出当前所有参赛人员数据?", "警告", {
      //     confirmButtonText: "确定",
      //     cancelButtonText: "取消",
      //     type: "warning",
      //   }).then((response) => {
      //     const wb = XLSX.utils.table_to_book(
      //             document.querySelector("#inventData_jx_id_B")
                  
      //     );
      //     const wbout = XLSX.write(wb, {
      //       bookType: "xlsx",
      //       bookSST: true,
      //       type: "array",
      //     });
      //     try {
      //       FileSaver.saveAs(
      //               new Blob([wbout], {type: "application/octet-stream"}),
      //               "参赛人员数据.xlsx"
      //       );
      //     } catch (e) {
      //       if (typeof console !== "undefined") console.log(e, wbout);
      //     }
      //   });
      myExcel.getExcel("#inventData_jx_id_B","教学设备库存记录")
    },
    invent_yhp_toExcel(){
      myExcel.getExcel("#inventData_yhp_id_B","易耗品库存记录")
      
    }
  //   columnar_invent() {
  //     // 基于准备好的dom，初始化echarts实例
  //     var myChart = echarts.init(document.getElementById("columnar_invent"));
  //     // 绘制图表
  //     myChart.setOption({
  //       xAxis: {
  //   data: ['A', 'B', 'C', 'D', 'E']
  // },
  // yAxis: {},
  // series: [
  //   {
  //     data: [10, 22, 28, 43, 49],
  //     type: 'bar',
  //     stack: 'x'
  //   },
  //   {
  //     data: [5, 4, 3, 5, 10],
  //     type: 'bar',
  //     stack: 'x'
  //   }
  // ]
  //     });
  //   },
  },
};
</script>
<style>
.box_inventory {
  /* background-color: #f4f4f6; */

  width: 100%;
  overflow-y:auto;
  height: 600px;
}
.bread {
  margin-left: 20px;
  padding-top: 20px;
}
.box_invent {
  background-color: #ffffff;
  margin: 20px;
  padding: 20px;
}
/* 搜索框 */
.search_teach {
  display: flex;
  justify-content: space-between;
}
.search {
  width: 300px;
}
/* 库存图标 */
#columnar_invent {
  width: 300px;
  height: 300px;
}
</style>